<template>
  <div id="box">
    <div class="topbar">
      <img class="logo" src="~assets/avatars/zhizunbao.jpg" height="38" alt="">
      <div class="title">
        <span class="t-1">王者荣耀</span>
        <span class="t-2">攻略站</span>
      </div>
      <router-link class="link" tag="div" :to="'/home'">
        <span>更多英雄 &gt;</span>
      </router-link>
    </div>
    <!-- end of topbar -->
    <div class="content">
      <div class="top" :style="{'background-image': `url(${heroInfo.banner})`}">
        <div class="info">
          <div class="row">{{ heroInfo.nickname }}</div>
          <div class="name row">{{ heroInfo.name }}</div>
          <div class="row">{{ heroInfo.categories.map(v => v.name).join(' ') }}</div>
          <div class="data row" v-if="heroInfo.scores">
            <span>难度</span>
            <span class="difficult">{{ heroInfo.scores.difficult }}</span>
            <span>技能</span>
            <span class="skill">{{ heroInfo.scores.skills }}</span>
            <span>攻击</span>
            <span class="attack">{{ heroInfo.scores.attack }}</span>
            <span>生存</span>
            <span class="survival">{{ heroInfo.scores.survive }}</span>
          </div>
          <div @click="$router.push('/')">皮肤 3 &gt;</div>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="tab">
        <div class="item">英雄初识</div>
        <div class="item">进阶攻略</div>
      </div>
      <swiper>
        <!-- 技能 页面 -->
        <swiper-slide>
          <div class="main">
            <router-link tag="div" :to="'/'" class="item">
              <i class="icon font_family icon-play"></i>
              英雄介绍
            </router-link>
            <router-link tag="div" :to="'/'" class="item">
              <i class="icon font_family icon-tupian"></i>
              一图识英雄
            </router-link>
          </div>
          <!-- 技能图片 -->
          <div class="skills">
            <div class="skill-icons">
              <img 
                  class="icon" 
                  :class="{on : currentSkillIndex === index}"
                  :src="item.icon" 
                  v-for="(item, index) in heroInfo.skills" :key="item.name"
                  alt=""
                  @click="changeIndex(index)">
            </div>
            <!-- 技能介绍 -->
            <div class="skill-include" v-if="currentSkill">
              <div class="skill-name">
                <h3>{{ currentSkill.name }}</h3>
                <span>(冷却值: {{ currentSkill.delay }}  消耗: {{ currentSkill.cost }})</span>
              </div>
              <div class="skill-description">{{ currentSkill.description }}</div>
              <div class="skill-tips">小提示: {{ currentSkill.tips }}</div>
            </div>
          </div>
          <!-- 使用技巧 -->
          <div class="usageTips tip">
            <i class="icon font_family icon-VRtiyan"></i>
            <span class="tip-name"><b>使用技巧</b></span>
            <p>{{ heroInfo.usageTips }}</p>
            
          </div>
          <!-- 对抗技巧 -->
          <div class="battleTips tip">
            <i class="icon font_family icon-VRtiyan"></i>
            <span class="tip-name"><strong>对抗技巧</strong></span>
            <p>{{ heroInfo.battleTips }}</p>
          </div>
          <!-- 团战思路 -->
          <div class="tramTips tip">
            <i class="icon font_family icon-VRtiyan"></i>
            <span class="tip-name"><b>团战思路</b></span>
            <p>{{ heroInfo.tramTips }}</p>
          </div>
          <!-- 最佳搭档 -->
          <div class="hero-ralation">
            <i class="icon font_family icon-VRtiyan"></i>
            <span class="tip-name"><b>最佳搭档</b></span>
            <div class="best-partnet" v-for="item in heroInfo.partners" :key="item.name">
              <div class="partner-avatar">
                <img src="http://127.0.0.1:3000/uploads/0e421235e8b65284a74e79dcde23b6bc" alt="">
              </div>
              <div class="text">
                {{ item.description }}
              </div>
            </div>
            
          </div>
        </swiper-slide>

        <!-- 攻略页面 -->
        <swiper-slide>

        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Hero',
    props: {
      id: { required: true }
    },
    data() {
      return {
        heroInfo: {
          name: '',
          banner: '',
          skills: [],
          partners: []
        },
        currentSkillIndex: 0,
      }
    },
    computed: {
      currentSkill() {
        return this.heroInfo.skills[this.currentSkillIndex]
      }
    },
    methods: {
      async getHeroInfo() {
        const res = await this.$http.get(`/heros/${this.id}`);
        this.heroInfo = res.data
      },
      changeIndex(index) {
        this.currentSkillIndex = index
      }
    },
    created() {
      this.getHeroInfo();
    }
  }
</script>

<style lang="scss" scoped>
  .topbar {
    height: 49px;
    background-color: #343440;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: sticky;
    top: 0;
    z-index: 99;
    .logo {
      border-radius: 3px;
    }
    .title {
      flex: 1;
      margin-left: 10px;
      .t-1 {
        font-size: 14px;
        color: #fff;
      }
      .t-2 {
        font-size: 14px;
        color: #fff;
        padding-left: 30px;
      }
    }
    .link {
      font-size: 14px;
      color: #fff;
      text-decoration: none;
    }
  }
  .content {
    margin-bottom: 1px;
    .top {
      position: relative;
      height: 50vw;
      background-size: cover;
      // background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
      .info {
        position: absolute;
        bottom: 0;
        padding: 2px 10px;
        display: inline-block;
        color: #fff;
        // background-color: #343440;
        background-color: rgba($color: #343440, $alpha: 0.6);

        .row {
          line-height: 1.4rem;
        }
        .name {
          font-size: 16px;
          font-weight: bolder;
        }
        .difficult {
          color: orangered;
          padding: 0 7px 0 2px;
        }
         .skill {
          color: blue;
          padding: 0 7px 0 2px;
        }
         .attack {
          color: yellow;
          padding: 0 7px 0 2px;
        }
         .survival {
          color: red;
          padding: 0 7px 0 2px;
        }
      }
    }
  }
  .info {
    padding: 10px;
    .tab {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      padding: 10px 0;
      .item {
        font-size: 16px;
      }
      .active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
    }
    .main {
      margin-top: 6px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      .icon {
        color: #409eff;
        font-weight: bolder;
      }
      .item {
        width: 49%;
        text-align: center;
        padding: 7px 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        button {
          width: 100%;
        }
      }
    }
    .skills {
      margin-top: 10px;
      padding: 10px;
      background-color: #fff;
      border-radius: 3px;
      .skill-icons {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        .icon {
          width: 18%;
          border-radius: 50%;
          border: 2px solid #fff;
        }
        img.on {
          border: 2px solid #409eff;
          border-radius: 50%;
        }
      }
      .skill-include {
        .skill-name {
          display: flex;
          justify-content: space-around;
          margin-top: 10px;
          h3 {
            margin: 0 0 10px 15px;
          }
          span {
            margin-left: 30px;
            flex: 1;
          }
        }
        .skill-description {
          padding: 0 10px 10px;
          line-height: 1.6rem;
          border-bottom: 1px solid #ccc;
        }
        .skill-tips {
          padding-top: 10px;
          color: #999;
        }
      }
    }
    .tip {
      margin-top: 8px;
      padding: 10px;
      background-color: #fff;
      .icon {
        margin-right: 5px;
        font-size: 16px;
      }
      span {
        font-size: 18px;
      }
      p {
        font-size: 15px;
        line-height: 1.6rem;
      }
    }
    .hero-ralation {
      margin-top: 8px;
      padding: 10px;
      background-color: #fff;
      .icon {
        margin-right: 5px;
        font-size: 16px;
      }
      span {
        font-size: 18px;
      }
      .best-partnet {
        display: flex;
        justify-content: space-around;
        padding-top: 10px;
        align-items: center;
        .partner-avatar {
          width: 60px;
          height: 40px;
          img {
            width: 100%;
            border-radius: 5px;
          }
        }
        .text {
          flex: 1;
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }
  }
</style>
